<!doctype html>
<html>
  <head>
    <title>方法处理器示例</title>
    <style>
      #app {
        font-family: 'Arial', sans-serif;
        background-color: #f5f5f5;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      }
      button {
        margin-left: 10px;
      }
    </style>
    <script src="https://unpkg.com/vue@3.4.0"></script>
  </head>
  <body>
    <div id="app">
      <h2>任务管理器</h2>
      <div>
        <input v-model="newTask" placeholder="输入新任务" @keyup.enter="addTask" />
        <button @click="addTask">添加任务</button>
      </div>

      <ul>
        <li v-for="(task, index) in tasks" :key="index">
          {{ task.text }}
          <button @click="toggleTask" :data-index="index">
            {{ task.completed ? '取消完成' : '标记完成' }}
          </button>
          <button @click="removeTask" :data-index="index">删除</button>
        </li>
      </ul>

      <p>总任务数：{{ tasks.length }}，已完成：{{ completedCount }}</p>
    </div>

    <script>
      const { createApp, ref, computed } = Vue

      createApp({
        setup() {
          const newTask = ref('')
          const tasks = ref([])

          const completedCount = computed(() => {
            return tasks.value.filter(task => task.completed).length
          })

          const addTask = () => {
            if (newTask.value.trim()) {
              tasks.value.push({
                text: newTask.value,
                completed: false
              })
              newTask.value = ''
            }
          }

          const toggleTask = event => {
            const index = parseInt(event.target.dataset.index)
            tasks.value[index].completed = !tasks.value[index].completed
          }

          const removeTask = event => {
            const index = parseInt(event.target.dataset.index)
            tasks.value.splice(index, 1)
          }

          return {
            newTask,
            tasks,
            completedCount,
            addTask,
            toggleTask,
            removeTask
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>
